<template>
	<view class="login">
		<view class="title">
			<navigator url="/pages/login/index">
				<view class="login_text ">
					登录

				</view>
			</navigator>
			<view class="register_text active">
				注册
				<text class="active"></text>
			</view>
		</view>
		<view class="login_box">
			<view class="username">
				<text>用户名</text>
				<input type="text" placeholder="请输入用户名" v-model="username" />
			</view>
			<view class="username">
				<text>真实姓名</text>
				<input type="text" placeholder="请输入真实姓名" v-model="name" />
			</view>
			<view class="username">
				<text>手机号</text>
				<picker class="changePhones" mode="selector" :range="prefixlist" @change="changePhone">
					<view>{{prefix}} <i class="uni-btn-icon" style="color: black; font-size: 15px;transform: rotate(-90deg);"></i></view>
					
				</picker>
				<input type="number" placeholder="请输入手机号" v-model="phone" class="phoneinput" />

			</view>
			<view class="username">
				<text>验证码</text>
				<input type="number" placeholder="请输入验证码" v-model="code" />
				<view class="codebtn" @click="getCode" v-if="codeTime">
					获取验证码
				</view>
				<view class="codebtn" v-else>
					剩余{{time}}秒
				</view>
			</view>
			<view class="password">
				<text>密码</text>
				<input type="password" placeholder="请输入登录密码" v-model="password_login" />
			</view>
			<view class="password">
				<text>确认密码</text>
				<input type="password" placeholder="再次输入密码" v-model="password_login_again" />
			</view>
			<view class="password">
				<text>支付密码</text>
				<input type="password" placeholder="请输入密码" v-model="password_pay" />
			</view>
			<view class="password">
				<text>上级邀请码</text>
				<input type="text" placeholder="请输入上级邀请码" v-model="recommend" />
			</view>
			<view class="btn" @click="Register">
				注册
			</view>
			<view class="tips">
				<text></text>
				<navigator url="/pages/login/index" class="forget">
					返回登录
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Register,
		SendCode
	} from '../../api/api.js'
	export default {
		data() {
			return {
				username: '',
				phone: '',
				password_login: '',
				password_login_again: '',
				password_pay: '',
				recommend: '',
				name: '',
				code: '',
				codeTime: true,
				time: 60,
				index: '',
				prefix:'86',
				prefixlist: ['86', '852']

			}
		},
		onLoad(res) {
			console.log(res)
			this.recommend = res.recommend
		},
		methods: {
			changePhone(e){
				console.log(e);
				let value = e.detail.value
				this.prefix = this.prefixlist[value]
			},
			getCode() {
				if (this.phone == '') {
					uni.showToast({
						title: '手机号码不能为空',
						icon: 'none'
					})
					return false
				}

				this.codeTime = false
				SendCode({
					phone: this.phone,
					prefix:this.prefix
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
				this.index = setInterval(() => {
					if (this.time <= 0) {
						this.codeTime = true
						clearInterval(this.index)
					} else {
						this.time--
					}
				}, 1000)

			},
			Register() {
				if (this.password_login != this.password_login_again) {
					uni.showToast({
						title: '两次密码不相同，请重新输入',
						icon: 'none'
					})
				}
				Register({
					username: this.username,
					prefix:this.prefix,
					phone: this.phone,
					password_login: this.password_login,
					password_pay: this.password_pay,
					recommend: this.recommend,
					name: this.name,
					code: this.code
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					setTimeout(() => {
						if (res.status == 1) {
							uni.redirectTo({
								url: '/pages/login/index'
							})
						}
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.changePhones {
		position: absolute;
		top: 39px;
		left: 15px;
		z-index: 999;
	}

	.phoneinput {
		padding-left: 60px !important;
	}

	.username {
		position: relative;

		.codebtn {
			background: #1d3f2b;
			position: absolute;
			right: 10px;
			top: 35px;
			height: 30px;
			line-height: 30px;
			font-size: 12px;
			color: #fff;
			border-radius: 5px;
			width: 70px;
			text-align: center;
		}
	}

	.login {
		padding-top: 20px;
		font-size: 16px;
		height: 100%;
		background: #1d3f2b;

		.title {
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #fff;
			width: 50%;
			margin: 0 auto;

			view {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			text {
				display: block;
				width: 30px;
				height: 3px;
				background: #fff;
				margin-top: 3px;
			}
		}

		.active {
			font-size: 24px;
		}

		.login_box {
			background: #fff;
			width: 80%;
			padding: 5%;
			padding-top: 10%;
			border-radius: 8px;
			margin: 20px auto;

			text {
				margin: 10px 0;
				display: block;
				font-weight: bold;
				font-size: 14px;
			}

			input {
				border: 1px solid #377751;
				outline: 0;
				border-radius: 5px;
				height: 40px;
				padding-left: 15px;
				margin-top: 10px;
			}
		}

		.tips {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			align-items: center;

			text {
				font-weight: normal;
				color: #777;
			}

			.forget {
				color: $uni-text-color;
			}
		}


	}
</style>
